JavaScript Optional Chaining'ga chuqur kirish: Xususiyatlarga xavfsiz murojaat qilish usullari

Zamonaviy veb-dasturlashning tamal toshlaridan biri bo'lgan JavaScript, ko'pincha dasturchilar oldiga murakkab obyekt tuzilmalari bo'ylab harakatlanish vazifasini qo'yadi. Eng keng tarqalgan xavflardan biri bu mavjud bo'lmasligi mumkin bo'lgan xususiyatlarga murojaat qilishga urinishdir, bu esa qo'rqinchli TypeError: Cannot read properties of undefined (reading '...') xatosiga olib keladi. Optional chaining paydo bo'lishidan oldin, dasturchilar ushbu xatolarning oldini olish uchun ko'p so'zli va ba'zan noqulay shartli tekshiruvlarga tayanishgan. Endi, optional chaining kodning o'qilishi va qo'llab-quvvatlanishini yaxshilaydigan yanada nafis va ixcham yechimni taqdim etadi. Ushbu keng qamrovli qo'llanma optional chaining'ning nozikliklarini chuqur o'rganib, uning qo'llanilishi, afzalliklari va ilg'or qo'llash usullarini namoyish etadi.

Muammoni tushunish: Chuqur xususiyatlarga murojaat qilish xavflari

API'dan olingan foydalanuvchi profili obyekti bilan ishlayotgan vaziyatni ko'rib chiqing. Ushbu obyekt user.address.city.name kabi ichki tuzilishga ega bo'lishi mumkin. Biroq, bu xususiyatlarning barchasi har doim mavjud bo'lishiga kafolat yo'q. Agar user.address undefined yoki null bo'lsa, user.address.city ga murojaat qilishga urinish dastur ishlashi vaqtida xatolikka olib keladi. Bu, ayniqsa, tashqi manbalardan yoki foydalanuvchi tomonidan yaratilgan tarkibdan olingan ma'lumotlar bilan ishlashda keng tarqalgan muammo.

An'anaga ko'ra, dasturchilar keyingi xususiyatga murojaat qilishdan oldin har bir xususiyat mavjudligini ta'minlash uchun bir qator shartli tekshiruvlardan foydalanishardi. Bu yondashuv, funksional bo'lsa-da, ayniqsa chuqur ichki o'rnatilgan obyektlar bilan ishlaganda tezda noqulay va o'qish qiyin bo'lib qolishi mumkin.

Misol (optional chaining'siz):

            
const user = {
  address: {
    city: {
      name: 'London'
    }
  }
};

let cityName = 'Noma\'lum';

if (user && user.address && user.address.city && user.address.city.name) {
  cityName = user.address.city.name;
}

console.log(cityName); // Natija: London

const user2 = {}; // Bo'sh foydalanuvchi obyekti

let cityName2 = 'Noma\'lum';

if (user2 && user2.address && user2.address.city && user2.address.city.name) {
  cityName2 = user2.address.city.name;
}

console.log(cityName2); // Natija: Noma'lum

            

              
                Copy
              
            
          

Ko'rib turganingizdek, ichki if iboralari ko'p so'zli va takrorlanuvchandir. Bu kodni o'qish va qo'llab-quvvatlash qiyin. Optional chaining ancha toza yechim taklif qiladi.

Optional Chaining (?.) bilan tanishuv

Optional chaining ?. yangi sintaksisini taqdim etadi, bu esa ichki o'rnatilgan obyekt xususiyatlariga xavfsiz murojaat qilish imkonini beradi. U ixtiyoriy xususiyat nullish (null yoki undefined) bo'lsa, ifodani qisqa tutashuv (short-circuiting) orqali to'xtatadi. Xato chiqarish o'rniga, ifoda undefined qiymatini qaytaradi.

Misol (optional chaining bilan):

            
const user = {
  address: {
    city: {
      name: 'London'
    }
  }
};

const cityName = user?.address?.city?.name;

console.log(cityName); // Natija: London

const user2 = {}; // Bo'sh foydalanuvchi obyekti

const cityName2 = user2?.address?.city?.name;

console.log(cityName2); // Natija: undefined

            

              
                Copy
              
            
          

Optional chaining bilan kod qanchalik toza va ixcham bo'lib qolganiga e'tibor bering. ?. operatori zanjirdagi har qanday xususiyat nullish bo'lgan holatni osonlik bilan boshqaradi, xatolarning oldini oladi va undefined qiymatini qaytaradi.

Optional Chaining qanday ishlaydi

?. operatori quyidagicha ishlaydi:

• Agar ?. belgisining chap tomonidagi xususiyat mavjud bo'lsa, ifoda normal tarzda baholanishda davom etadi.
• Agar ?. belgisining chap tomonidagi xususiyat null yoki undefined bo'lsa, ifoda qisqa tutashuvga uchraydi va undefined qiymatini qaytaradi.
• Ifodaning qolgan qismi baholanmaydi.

Bu qisqa tutashuv xatti-harakati xatolarning oldini olish va kodni soddalashtirish uchun juda muhimdir. Bu sizga ko'plab shartli tekshiruvlar yozmasdan chuqur joylashgan xususiyatlarga xavfsiz murojaat qilish imkonini beradi.

Optional Chaining'dan foydalanishning afzalliklari

• Kodning o'qilishi osonlashadi: Optional chaining kodingizdagi ko'p so'zlilikni sezilarli darajada kamaytirib, uni o'qish va tushunishni osonlashtiradi.
• Xatolarni boshqarish kamayadi: Bu aniq null tekshiruvlariga bo'lgan ehtiyojni yo'qotadi va dastur ishlashi vaqtidagi xatolar xavfini kamaytiradi.
• Kodni qo'llab-quvvatlash soddalashadi: Toza kodni qo'llab-quvvatlash va qayta ishlash osonroq.
• Ixcham sintaksis: ?. operatori ichki xususiyatlarga murojaat qilishning ixcham va nafis usulini taqdim etadi.

Optional Chaining'ni qo'llash holatlari

Optional chaining turli xil stsenariylarda qo'llanilishi mumkin, jumladan:

• Ichki joylashgan obyekt xususiyatlariga murojaat qilish: Bu avvalgi misollarda ko'rsatilganidek, eng keng tarqalgan qo'llash holati.
• Mavjud bo'lmasligi mumkin bo'lgan metodlarni chaqirish: Siz optional chaining yordamida obyektlarda mavjud bo'lmasligi mumkin bo'lgan metodlarni xavfsiz chaqirishingiz mumkin.
• Chegaradan tashqarida bo'lishi mumkin bo'lgan massiv elementlariga murojaat qilish: Kamroq tarqalgan bo'lsa-da, siz massiv indekslari bilan optional chaining'dan foydalanishingiz mumkin.

Optional Chaining bilan metodlarni chaqirish

Siz obyektda mavjud bo'lmasligi mumkin bo'lgan metodlarni xavfsiz chaqirish uchun optional chaining'dan foydalanishingiz mumkin. Bu, ayniqsa, turli interfeyslarga ega bo'lishi mumkin bo'lgan obyektlar yoki dinamik ravishda yaratilgan obyektlar bilan ishlaganda foydalidir.

Misol:

            
const user = {
  profile: {
    getName: function() {
      return 'John Doe';
    }
  }
};

const userName = user?.profile?.getName?.();

console.log(userName); // Natija: John Doe

const user2 = {};

const userName2 = user2?.profile?.getName?.();

console.log(userName2); // Natija: undefined

            

              
                Copy
              
            
          

Ushbu misolda, getName metodi user obyektida mavjud bo'lmasligi mumkin. Optional chaining'dan foydalanib, biz metodni xatosiz xavfsiz chaqirishimiz mumkin. Agar user.profile yoki user.profile.getName nullish bo'lsa, ifoda qisqa tutashuvga uchraydi va undefined qiymatini qaytaradi.

Optional Chaining bilan massiv elementlariga murojaat qilish

Kamroq tarqalgan bo'lsa-da, siz massivning chegaradan tashqarida bo'lishi mumkin bo'lgan elementlariga murojaat qilish uchun optional chaining'dan foydalanishingiz mumkin. Biroq, shuni ta'kidlash kerakki, optional chaining faqat nullish (null yoki undefined) qiymatlar bilan ishlaydi, massivning chegaradan tashqaridagi indekslari bilan emas. Shuning uchun, bu maqsadda massiv uzunligini tekshirishdan foydalanish odatda yaxshiroqdir.

Misol:

            
const myArray = [1, 2, 3];

const element = myArray?.[5];

console.log(element); // Natija: undefined (chunki myArray[5] undefined)

const myArray2 = [1, null, 3];
const element2 = myArray2?.[1];

console.log(element2); // Natija: null

            

              
                Copy
              
            
          

Birinchi misolda, myArray[5] chegaradan tashqarida bo'lgani uchun undefined. Optional chaining operatori to'g'ri undefined qiymatini qaytaradi. Ikkinchi misolda, 1-indeksdagi element aniq null qilib belgilangan va optional chaining ham to'g'ri null qiymatini qaytaradi.

Optional Chaining'ni Nullish Coalescing (??) bilan birlashtirish

Optional chaining xususiyat nullish bo'lganda undefined qaytarib xatolarning oldini olishga yordam bersa-da, siz bunday hollarda standart qiymatni taqdim etishni xohlashingiz mumkin. Aynan shu yerda nullish coalescing operatori (??) yordamga keladi. Nullish coalescing operatori chap tomondagi operand null yoki undefined bo'lganda o'ng tomondagi operandni qaytaradi, aks holda chap tomondagi operandni qaytaradi.

Misol:

            
const user = {};

const cityName = user?.address?.city?.name ?? 'Noma\'lum Shahar';

console.log(cityName); // Natija: Noma'lum Shahar

const user2 = {
  address: {
    city: {
      name: 'London'
    }
  }
};

const cityName2 = user2?.address?.city?.name ?? 'Noma\'lum Shahar';

console.log(cityName2); // Natija: London

            

              
                Copy
              
            
          

Ushbu misolda, agar user?.address?.city?.name nullish bo'lsa, ?? operatori 'Noma\'lum Shahar' qiymatini qaytaradi. Aks holda, u user?.address?.city?.name qiymatini qaytaradi. Optional chaining va nullish coalescing'ning bu kombinatsiyasi potentsial mavjud bo'lmagan xususiyatlarni boshqarish va standart qiymatlarni taqdim etishning kuchli va ixcham usulini ta'minlaydi.

Brauzerlar bilan mosligi

Optional chaining JavaScript'ga nisbatan yaqinda qo'shilgan, shuning uchun brauzerlar bilan mosligini hisobga olish muhim. Ko'pgina zamonaviy brauzerlar optional chaining'ni qo'llab-quvvatlaydi, jumladan:

• Chrome (80-versiya va undan keyingilari)
• Firefox (74-versiya va undan keyingilari)
• Safari (13.1-versiya va undan keyingilari)
• Edge (80-versiya va undan keyingilari)
• Node.js (14-versiya va undan keyingilari)

Agar siz eski brauzerlarni qo'llab-quvvatlashingiz kerak bo'lsa, kodingizni JavaScript'ning mos keluvchi versiyasiga o'tkazish uchun Babel kabi transpilerdan foydalanishingiz kerak bo'ladi. Babel eski brauzerlarda ?. operatoridan foydalanishga imkon beruvchi optional chaining uchun plaginni taqdim etadi.

Qochish kerak bo'lgan umumiy xatolar

• Optional Chaining'dan haddan tashqari ko'p foydalanish: Optional chaining kuchli vosita bo'lsa-da, uni oqilona ishlatish muhim. Ma'lumotlar tuzilmangiz yoki mantig'ingizdagi fundamental muammolarni yashirish uchun undan foydalanmang. Ba'zan, xatolarning oldini olish uchun optional chaining'ga tayanmasdan, asosiy muammoni hal qilish yaxshiroqdir.
• Potentsial xatolarni e'tiborsiz qoldirish: Optional chaining xususiyatlar nullish bo'lganda TypeError istisnolarining oldini oladi, lekin u barcha potentsial xatolarni yo'q qilmaydi. Masalan, agar siz raqam kutayotgan bo'lsangiz-u, lekin undefined olsangiz, siz hali ham kutilmagan xatti-harakatlarga duch kelishingiz mumkin. Bunday holatlarni tegishli ravishda boshqarishga ishonch hosil qiling.
• Nullish va Falsy'ni noto'g'ri tushunish: Yodingizda tutingki, optional chaining faqat null va undefined ni tekshiradi, 0, '', false yoki NaN kabi boshqa falsy qiymatlarni emas. Agar siz ushbu holatlarni boshqarishingiz kerak bo'lsa, qo'shimcha tekshiruvlar yoki mantiqiy OR operatoridan (||) foydalanishingiz kerak bo'ladi.

Ilg'or qo'llash holatlari va e'tiborga olinadigan jihatlar

Dinamik kalitlar bilan ishlash

Optional chaining dinamik kalitlar bilan uzluksiz ishlaydi, bu sizga o'zgaruvchilar yoki ifodalar yordamida xususiyatlarga murojaat qilish imkonini beradi. Bu, ayniqsa, xususiyat nomlari oldindan ma'lum bo'lmagan ma'lumotlar tuzilmalari bilan ishlashda foydalidir.

Misol:

            
const user = {
  profile: {
    'first-name': 'John',
    'last-name': 'Doe'
  }
};

const key = 'first-name';

const firstName = user?.profile?.[key];

console.log(firstName); // Natija: John

const invalidKey = 'middle-name';

const middleName = user?.profile?.[invalidKey];

console.log(middleName); // Natija: undefined

            

              
                Copy
              
            
          

Ushbu misolda biz user.profile obyektining 'first-name' xususiyatiga dinamik ravishda murojaat qilish uchun key o'zgaruvchisidan foydalanamiz. Optional chaining, agar user yoki profile obyektlari nullish bo'lsa yoki dinamik kalit mavjud bo'lmasa, xato yuzaga kelmasligini ta'minlaydi.

React komponentlarida Optional Chaining

Optional chaining, ayniqsa, React komponentlarida qimmatlidir, chunki siz ko'pincha asinxron tarzda olinishi mumkin bo'lgan yoki murakkab ichki tuzilishga ega bo'lishi mumkin bo'lgan ma'lumotlar bilan ishlaysiz. Optional chaining'dan foydalanish xatolarning oldini olishi va komponent mantig'ini soddalashtirishi mumkin.

Misol:

            
function UserProfile(props) {
  const { user } = props;

  return (
    

      
{user?.name ?? 'Noma\'lum Foydalanuvchi'}
      
Shahar: {user?.address?.city ?? 'Noma\'lum Shahar'}
    
  );
}

// Foydalanish misoli


// Natija:
// 
Alice
// 
Shahar: Paris


// Natija:
// 
Bob
// 
Shahar: Noma'lum Shahar


// Natija:
// 
Noma'lum Foydalanuvchi
// 
Shahar: Noma'lum Shahar

            

              
                Copy
              
            
          

Ushbu misolda biz user obyektining name va address.city xususiyatlariga murojaat qilish uchun optional chaining'dan foydalanamiz. Agar user obyekti null bo'lsa yoki address yoki city xususiyatlari mavjud bo'lmasa, komponent xato chiqarish o'rniga standart qiymatlarni ko'rsatadi. Nullish coalescing (??) dan foydalanish aniq va bashorat qilinadigan zaxira qiymatlarni taqdim etish orqali komponentning mustahkamligini yanada oshiradi.

Xatolarni boshqarish strategiyalari

Optional chaining ma'lum turdagi xatolarning oldini olsa-da, keng qamrovli xatolarni boshqarish strategiyasiga ega bo'lish hali ham muhim. Kutilmagan xatolarni boshqarish uchun try...catch bloklaridan foydalanishni va kodingizni tuzatishga yordam berish uchun xatolarni log yozishni o'ylab ko'ring. Shuningdek, production muhitingizdagi xatolarni kuzatish va nazorat qilish uchun Sentry yoki Rollbar kabi vositalardan foydalaning.

Misol:

            
try {
  const userName = user?.profile?.getName?.();
  console.log(userName);
} catch (error) {
  console.error('Xatolik yuz berdi:', error);
  // Xatoni Sentry kabi log yozish xizmatiga yuborish
  // Sentry.captureException(error);
}

            

              
                Copy
              
            
          

Xulosa

JavaScript'ning optional chaining operatori (?.) xavfsizroq, toza va qo'llab-quvvatlash osonroq bo'lgan kod yozish uchun kuchli va qimmatli vositadir. U sizga ko'p so'zli shartli tekshiruvlar yozmasdan ichki obyekt xususiyatlariga murojaat qilish imkonini beradi, dastur ishlashi vaqtidagi xatolarning oldini oladi va kodning o'qilishini yaxshilaydi. Optional chaining'ni nullish coalescing operatori (??) bilan birlashtirib, siz potentsial mavjud bo'lmagan xususiyatlarni osonlik bilan boshqarishingiz va standart qiymatlarni taqdim etishingiz mumkin. Global fikrlovchi dasturchi sifatida optional chaining'ni o'zlashtirish sizga dunyoning turli burchaklaridan kelgan turli xil ma'lumotlar tuzilmalari va foydalanuvchi kiritmalarini boshqara oladigan yanada mustahkam va chidamli ilovalar yaratish imkonini beradi. Ushbu kuchli xususiyatning afzalliklarini maksimal darajada oshirish uchun brauzer mosligini hisobga olishni va umumiy xatolardan qochishni unutmang.

Optional chaining'ni o'zlashtirish orqali siz JavaScript kodingiz sifatini sezilarli darajada oshirishingiz va foydalanuvchilaringiz qayerda joylashganligidan qat'i nazar, veb-ilovalaringizning foydalanuvchi tajribasini yaxshilashingiz mumkin.